<template>
    <hb-box title="身份认证">
        <div class="Authed">
            <div class="selfInfo">
                <img class="authIcon" :src="authIcon">
                <h2 class="infoTitle" v-text="Lang.authText[lang][6]">认证成功！</h2>
                <div class="userinfo">
                    <div class="left">
                        <span class="user" v-text="Lang.authText[lang][2]+':'">姓名：</span>
                        <span v-text="Lang.authText[lang][3]+':'">身份证号：</span>
                    </div>
                    <div class="right">
                        <span class="user">{{authName}}</span>
                        <span>{{formatID(authID)}}</span>
                    </div>
                </div>
            </div>
        </div>
    </hb-box>
</template>

<script>
import authed from './authed.png'
import Lang from '../lang.js'
export default {
	name: 'Authed',
	data() {
		return {
			Lang,
			authIcon: authed,
		}
	},
	computed: {
		lang() {
			return this.$store.state.setting.lang
		},
	},
	props: {
		authName: {
			//实名认证姓名
			default: '',
		},
		authID: {
			//实名认证身份证号
			default: '',
		},
	},
	methods: {
		formatID(id) {
			let ID = ''
			ID = id.replace(/(.{5}).*(.{5})/, '$1******$2')
			return ID
		},
	},
}
</script>

<style scoped>
.selfInfo {
	width: 480px;
	margin: 0 auto;
	text-align: center;
}
.infoTitle {
	font-size: 24px;
	font-weight: 400;
	color: #c7cce6;
}
.userinfo {
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.left,
.right {
	width: 200px;
	height: 180px;
}
.left {
	margin-right: 10px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	color: #61688a;
}
.right {
	margin-left: 10px;
	display: flex;
	flex-direction: column;
	color: #c7cce6;
	align-items: flex-start;
}
.user {
	display: inline-block;
	margin-bottom: 10px;
}
.authIcon {
	width: 150px;
	margin-top: 10px;
}
</style>

